<template>
    <!-- 押金 start-->
    <view class="payDeposit">
        <view class="cashPledge_back">
            <view class="cashPledge_list">
                <view>押金</view>
                <view class="cashPledge_list_jinge">
                    <text style="color:#333">￥{{jfPrice}}</text>
                </view>
            </view>
            <view class="cashPledge_list" style="border-bottom:1px solid #e6e6e6;">
                <view class="iconWis">
                    <i class="iconfont icon-weixinzhifu2"></i>
                </view>
                <text class="wxzf">微信支付</text>
            </view>
        </view>
        <!-- 使用优惠券 -->
        <view class="useDiscounts">
            <navigator url="/pages/personalCenter/coupons?type=FREE_DISPOSIT" wx:if="{{!hasCou}}">
                <checkbox-group class="useDiscounts_one" bindchange="change">
                    <checkbox wx:if="{{!changeCou}}" checked="{{changeCou}}"/>
                    <checkbox wx:if="{{changeCou}}" checked="{{!changeCou}}"/>
                </checkbox-group>
                <text class="useDiscounts_one_text">使用优惠券</text>
            </navigator>
            <view wx:if="{{hasCou}}">
                <checkbox-group class="useDiscounts_to" bindchange="change">
                    <checkbox checked="{{hasCou}}" />
                </checkbox-group>
                <view class="useDiscounts_to_text" wx:if="{{getCoupon.couponType == '现金优惠'}}">
                    使用{{getCoupon.couponType}}劵 ，可用余额：
                    <text class="shareColor">{{getCoupon.couponAmount}}</text>元
                </view>
                <view class="useDiscounts_to_text" wx:if="{{getCoupon.couponType != '现金优惠'}}">
                    使用{{getCoupon.couponType ? getCoupon.couponType : '免押金'}}劵
                </view>
            </view>
        </view>
        <!-- 使用优惠券 end -->
        <view class="pofix">
            <view class="youhuiquan_pay">
                <view class="youhuiquan_btn">
                    <checkbox-group bindchange="changeTwo">
                        <checkbox value="{{check}}" checked="{{check}}" />
                    </checkbox-group>
                </view>
                <view class="youhuiquan_text">
                    <text>我已阅读并同意</text>
                    <text style="  color: #ffb025;margin-left: 20rpx;" @tap="urlTo('/pages/tj/introSale')">用户协议</text>
                </view>
            </view>
            <view class="btn_to">
                <view wx:if="{{!hasCou}}">
                    实付款：￥{{jfPrice}}
                </view>
                <view wx:elif="{{hasCou && getCoupon.couponType == '现金优惠'}}">
                    实付款：￥{{getCoupon.couponAmount>=jfPrice ? 0 : (jfPrice - getCoupon.couponAmount)}}
                </view>
                <view wx:elif="{{hasCou && getCoupon.couponType != '现金优惠'}}">
                    实付款：￥0
                </view>
                <view @tap="submitYj">提交</view>
            </view>
        </view>
    </view>
    <!-- 押金 end-->
</template>
<script>
    import wepy from 'wepy'
    import api from '@/api/api'
    import tip from '@/utils/tip'
    import {GOODSDETAIL, CHOOSECOU} from '@/utils/constant'

    export default class payDeposit extends wepy.page {
      config = {
        // 配置当前页面
        navigationBarTitleText: '缴纳押金' // 头部标题
      }
      data = {
        userId: '',
        jfPrice: 0,
        hasCou: false,
        getCoupon: '',
        check: true,
          changeCou:false
      }

      onShow() {
        const t = this
        t.userId = wepy.getStorageSync('userId')
        t.getJfFun()
        let coupon = wx.getStorageSync(CHOOSECOU)
        if (coupon) {
          t.hasCou = true
          t.getCoupon = coupon
        } else {
          t.hasCou = false
        }
        console.log(t.hasCou)
        t.$apply()
      }

      /**
       * 获取缴费金额
       * @returns {Promise.<void>}
       */
      async getJfFun() {
        const t = this
        const a = await api.getJfPrice()
        if (a.data.code == 0) {
          t.jfPrice = a.data.data.deposit
          t.$apply()
        } else {
          tip.error(a.data.msg)
        }
      }

      /**
       * 去缴纳押金
       * @returns {Promise.<void>}
       */
      async disCreateFun() {
        const t = this
        let d = {}
        d['userId'] = t.userId
        if (t.getCoupon) {
          d.couponId = t.getCoupon.id
        }
        const a = await api.disCreate({
          query: d
        })
        if (a.data.code == 0) {
          if (a.data.data.state !== 'FINISH') {
            t.toPayFun(a.data.data)
          } else {
            tip.success('支付成功！！', 2000)
            wepy.navigateTo({
              url: '/pages/bidList/sellerBid'
            })
          }
        } else {
          tip.error(a.data.msg)
        }
      }

      /**
       * 去支付
       * @returns {Promise.<void>}
       */
      async toPayFun(r) {
        const a = await api.orderTrade({
          query: {
            userId: r.appUserId,
            orderId: r.id,
            orderType: 'DEPOSIT',
            payType: 'WX_MINI'
          },
          method: 'POST'
        })
        if (a.data.code == 0) {
          // 微信支付
          wx.requestPayment({
            timeStamp: a.data.data.wxpayPamram.timeStamp,
            nonceStr: a.data.data.wxpayPamram.nonceStr,
            package: a.data.data.wxpayPamram.package,
            signType: 'MD5',
            paySign: a.data.data.wxpayPamram.paySign,
            success: function() {
              tip.success('支付成功！！')
              wx.removeStorageSync(CHOOSECOU)
              wepy.navigateTo({
                url: '/pages/bidList/sellerBid'
              })
            }
          })
        } else {
          tip.error(a.data.msg)
        }
      }

      // 获取唯一标识openId
      async getmyOpenid(a) {
        const t = this
        const json = await api.getOpenid(
          {
            query: {}
          },
          'userId=' + t.userId + '&code=' + a
        )
        if (json.data.code == 0) {
          t.disCreateFun()
        } else {
          tip.error(json.data.msg)
        }
      }

      // 微信登录
      async wxLogin() {
        const t = this
        wx.login({
          success: function(res) {
            if (res.code) {
              t.getmyOpenid(res.code)
            } else {
              tip.error(res.msg)
            }
          }
        })
      }

      methods = {
          urlTo(url){
              wx.navigateTo({
                  url:url
              })
          },
        submitYj() {
          const t = this
          if (!t.check) {
            tip.alert('请同意用户协议')
          } else {
            t.wxLogin()
          }
        },
        change() {
          const t = this
            t.changeCou = t.changeCou ? false : true;
            t.hasCou = false;
          t.getCoupon = ''
          wx.removeStorageSync(CHOOSECOU)
          t.$apply()
        },
        changeTwo(e) {
          const t = this
          let c = e.detail.value
          if (c[0]) {
            t.check = true
          } else {
            t.check = false
          }
        }
      }
    }
</script>
<style lang="less">
// 押金 start
.payDeposit {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    .cashPledge_list {
        background: #fff;
        margin-bottom: 20rpx;
        padding: 30rpx 20rpx;
        display: flex;
        .cashPledge_list_jinge {
            margin-left: auto;
            text {
                display: block;
                vertical-align: middle;
            }
        }
        .wxzf {
            vertical-align: middle;
            line-height: 60rpx;
            height: 60rpx;
        }
    }
    .iconWis {
        text-align: center;
        width: ~'70rpx';
        display: inline-block;
        vertical-align: middle;
        .icon-weixinzhifu2 {
            color: #3cb034;
            vertical-align: middle;
        }
        .icon-zhifubao {
            color: #108ee9;
        }
        i {
            font-size: 20px;
        }
    }
    .cashPledge_list_fot {
        background: #fff;
        .cashPledge_list_view {
            margin-left: 20rpx;
        }
        .cashPledge_list_fix {
            display: flex;
            border-bottom: 1px solid #e6e6e6;
            padding: 20rpx 0;
            .cashPledge_list_fix_quan {
                vertical-align: middle;
            }
            .cashPledge_list_fix_ml {
                margin-left: auto;
                vertical-align: middle;
                padding-right: 20rpx;
            }
        }
        .cashPledge_list_size {
            padding: 20rpx 0;
            font-size: 26rpx;
            color: #999;
        }
    }
    .pofix {
        position: fixed;
        bottom: 0;
        width: 100%;
        .btn_to {
            display: flex;
            > view {
                width: 50%;
                font-size: 36rpx;
                height: 95rpx;
                line-height: 95rpx;
                text-align: center;
            }
            > view:first-child {
                background: #fff;
                color: #333;
            }
            > view:last-child {
                background: #ffb025;
                color: #fff;
            }
        }
    }
    .youhuiquan_pay {
        padding: 20rpx;
        .youhuiquan_btn {
            display: inline-block;
            vertical-align: middle;
        }
        .youhuiquan_text {
            display: inline-block;
            vertical-align: middle;
        }
    }
    .useDiscounts {
        padding: 20rpx;
        .useDiscounts_one {
            display: inline-block;
            vertical-align: middle;
        }
        .useDiscounts_one_text {
            display: inline-block;
            vertical-align: middle;
        }
        .useDiscounts_to {
            display: inline-block;
            vertical-align: middle;
        }
        .useDiscounts_to_text {
            display: inline-block;
            vertical-align: middle;
        }
    }
}
// 押金 end
</style>
